import React,{useEffect, useState} from 'react';
import {View,TouchableOpacity,StyleSheet,ScrollView,Text,Image} from 'react-native';
import '../../global'

const Math=({math})=>{
  return(    
    math.map((item,index)=>{
      return(
        <View style={styles.book} key={index}>
          <Image source={{uri:item.book_img}} style={styles.bookimg}/>
          <Text style={styles.bookname}>{item.book_name}</Text>
          <Text style={styles.bookauthor}>{item.book_user}</Text>
        </View>
    )})
  )
  }

  const Eng=({English})=>{
    return(    
      English.map((item,index)=>{
        return(
          <View style={styles.book} key={index}>
            <Image source={{uri:item.book_img}} style={styles.bookimg}/>
            <Text style={styles.bookname}>{item.book_name}</Text>
            <Text style={styles.bookauthor}>{item.book_user}</Text>
          </View>
      )})
    )
    }

  const Politics=({politics})=>{
   return(    
     politics.map((item,index)=>{
       return(
         <View style={styles.book} key={index}> 
           <Image source={{uri:item.book_img}} style={styles.bookimg}/>
           <Text style={styles.bookname}>{item.book_name}</Text>
           <Text style={styles.bookauthor}>{item.book_user}</Text>
         </View>
     )})
   )
   } 
      
  const Computer=({computer})=>{
    return(    
      computer.map((item,index)=>{
        return(
          <View style={styles.book} key={index}> 
            <Image source={{uri:item.book_img}} style={styles.bookimg}/>
            <Text style={styles.bookname}>{item.book_name}</Text>
            <Text style={styles.bookauthor}>{item.book_user}</Text>
          </View>
      )})
    )
    }
    const Card = ({name,math,English,politics,computer})=>{
      if(name=='math'){
          return (
            <ScrollView>
                 <Math math={math}></Math>
            </ScrollView>
             
     
          )
      }
      else if(name=='English'){
          return (
          <ScrollView>
              <Eng English={English}></Eng>
          </ScrollView>
      )
      }
      else if(name=='politics'){
          return (<View>
              <Politics politics={politics}></Politics>
      </View>)
      }else{
          return (<View>
          <Computer computer={computer}></Computer>
  </View>)
      }
  }
const Book=()=>{
    const [math,setMath]=useState([]);
    const [English,setEnglish]=useState([]);
    const [politics,setPolitics]=useState([]);
    const [computer,setComputer]=useState([]);
    const [tab,setTab]=useState('math');
    const [colors,setColors] = useState(['rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)'])
    useEffect(()=>{
      fetch('https://wx.qasdwer.top:8080/book/math')
      .then(res=>res.json())
      .then(res=>{ 
        setMath(res);
      })
      .catch((error)=>{
          console.log("Error");
          throw error;
        });

      fetch('https://wx.qasdwer.top:8080/book/English')
      .then(res=>res.json())
      .then(res=>{ 
        setEnglish(res);
      })
      .catch((error)=>{
          console.log("Error");
          throw error;
        });
      
      fetch('https://wx.qasdwer.top:8080/book/politics')
      .then(res=>res.json())
      .then(res=>{ 
        setPolitics(res);
      })
      .catch((error)=>{
          console.log("Error");
          throw error;
        });

      fetch('https://wx.qasdwer.top:8080/book/computer')
      .then(res=>res.json())
      .then(res=>{ 
        setComputer(res);
      })
      .catch((error)=>{
          console.log("Error");
          throw error;
        });
  },[])
   
    return(
        <ScrollView style={{width:'100%',height:'100%',backgroundColor:'white'}}>
            <View style={{width:'100%',display:'flex',marginTop:changeH(15),flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[0]}]}
                onPress={()=>{
                    setColors(['rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)'])
                    setTab('math')
                }}
                ><Text style={styles.text}>数学</Text></TouchableOpacity>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[1]}]}
                onPress={()=>{
                    setColors(['rgb(234,234,234)','rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)'])
                    setTab('English')
                }}
                ><Text style={styles.text}>英语</Text></TouchableOpacity>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[2]}]}
                 onPress={()=>{
                    setColors(['rgb(234,234,234)','rgb(234,234,234)','rgb(204,190,151)','rgb(234,234,234)'])
                    setTab('politics')
                }}
                ><Text style={styles.text}>政治</Text></TouchableOpacity>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[3]}]}  
                 onPress={()=>{
                    setColors(['rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(204,190,151)'])
                    setTab('computer')
                }}
                ><Text style={styles.text}>计算机</Text></TouchableOpacity>
            </View>
            <View style={{marginTop:changeH(25),height:changeH(1360)}}>
            <Card name={tab} math={math} English={English} politics={politics} computer={computer}></Card>
                
            </View>
        </ScrollView>
    )
}


const styles=StyleSheet.create({
    book:{
      height:changeH(250),
      width:'90%',
      borderRadius:changeW(20),
      borderWidth:1,
      borderColor:'#DCDCDC',
      marginLeft:changeW(35),
      marginBottom:changeH(20),
      marginTop:changeH(10),
      position:'relative',
    },
    bookname:{
      position:'absolute',
      top:changeH(50),
      left:changeW(200),
      fontSize:changeW(25),
      fontWeight:'bold'
    },
    bookauthor:{
      position:'absolute',
      top:changeH(120),
      left:changeW(200),
      fontSize:changeW(20)
    },
    bookimg:{
      width:changeW(150),
      height:changeH(230),
      position:'absolute',
      top:changeH(10),
      left:changeW(10),
      borderBottomLeftRadius:changeW(20),
      borderTopLeftRadius:changeW(20)
    },
    button:{
      width:changeW(130),
      height:changeH(70),
      display:'flex',
      alignItems:'center',
      justifyContent:'center',
      borderRadius:40
  },
  text:{
      fontSize:changeW(20)
  }
})
export default Book;